<template>
  <div id="main">
    <img v-if="header"
      :src="defaultImg[0]"
      alt="头像" @click="toUserLately"
    />
    <img v-if="!header"
      :src="this.userData.sex == 'boy' ? defaultImg[1] : defaultImg[2]"
      alt="头像" @click="toUserLately"
    />
    <h2 @click="toUserLately">{{ userData.username ? userData.username : "用户名" }}</h2>
    <ul>
      <li @click="toUserLately">{{ productions ? productions : "暂无" }}&nbsp;作品</li>
      <li @click="toUserFans">{{ followerNum ? followerNum : "暂无" }}&nbsp;粉丝</li>
    </ul>
    <p>
      {{
        userData.description
          ? userData.description
          : "这个用户很懒，什么都没留下"
      }}
    </p>
    <div class="compile" @click="toUserMsg" v-if="compileShow">编辑资料</div>
    <slot name="call"></slot>
    <slot name="attention"></slot>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
export default {
  props: ["userId"],
  data() {
    return {
      // 头像是否获取成功标志位
      header:false,
      // 头像地址数组
      defaultImg: [
        "http://localhost:8181/user/header/" + this.userId,
        require("@/assets/boyUser.jpg"),
        require("@/assets/girlUser.jpg"),
      ],
      productions: "",
      followerNum: "",
      userData: {},
    };
  },
  computed: {
    // 判断编辑按钮是否显示，当前登录用户是否是组件显示用户
    compileShow() {
      return (this.userId==getCookie("userId")) && getCookie("userId")!=null ;
    },
  },
  mounted() {
    // 判断用户是否登录(并判断是否是在笔记页面,若在笔记详情页就不用进行登录判断)
    if( this.$route.path != "/nodeDetail" && getCookie("userId") == null ) {
      return // 未登录就不用获取用户信息了
    }
    // 发送请求获取该用户的笔记数量
    this.$axios({
      method: "post",
      url: "http://localhost:8181/node/getUserNodeNumByUserId/" + this.userId,
    }).then(
      (res) => {
        this.productions = res.data;
      },
      (err) => {
        console.log(err);
      }
    );
    // 发送请求获取用户信息
    this.$axios({
      method: "post",
      url: "http://localhost:8181/user/findUserById/" + this.userId,
    }).then(
      (res) => {
        this.userData = res.data;
      },
      (err) => {
        console.log(err);
      }
    );
    // 发送请求获取用户粉丝数量FollowerNum
    this.$axios({
      method: "post",
      url: "http://localhost:8181/follow/getFollowerNumById/" + this.userId,
    }).then(
      (res) => {
        this.followerNum = res.data
      },
      (err) => {
        console.log(err);
      }
    );
    //  读取用户头像
    this.$axios({
      method:'get',
      url: "http://localhost:8181/user/header/" + this.userId
    }).then(
      (res) => {
        // 若头像获取成功
        if(res.data!="") {
          // 修改用户头像标志位，显示用户头像
          this.header = true
        }
        // 头像获取失败，使用默认头像...
      },
      (err) => {
        console.log(err);
      }
    );
  },
  methods: {
    // 跳转到用户信息编辑页面
    toUserMsg() {
      this.$router.push({
        name: "myMsg",
        params: {
          id: this.userData.id,
          mail: this.userData.mail,
          sex: this.userData.sex,
          username: this.userData.username,
          description: this.userData.description,
        },
      });
    },
    // 跳转到用户最近作品页面
    toUserLately(){
      // 配置参数
      let value = {
        id:this.$route.query.id
      }
      // 在笔记内容nodeDetail页面，用户的id在参数userId上
      if(this.$route.path == "/nodeDetail"){
        value = {
          id:this.$route.query.userId
        }
      }
      this.$router.push({
        name:'lately',
        query:value
      })
    },
    // 跳转到用户粉丝页面
    toUserFans(){
      // 配置参数
      let value = {
        id:this.$route.query.id
      }
      // 在笔记内容nodeDetail页面，用户的id在参数userId上
      if(this.$route.path == "/nodeDetail"){
        value = {
          id:this.$route.query.userId
        }
      }
      this.$router.push({
        name:'fans',
        query:value
      })
    }
  },
};
</script>

<style scoped>
#main {
  height: 130px;
  width: 100%;
  border-radius: 30px 30px 0 0;
  border-bottom: 0.3px #55556d solid;
  position: relative;
}
img {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 20px;
  cursor: pointer;
  background-color: #55556d6d;
  /* box-shadow: 1px 1px 1px 1px #55556d; */
  border: solid 4px #55556d;
}
.changeHead:hover {
  color: #6556bf;
}
h2 {
  color: #fff;
  font-size: 60px;
  position: absolute;
  top: 5px;
  left: 160px;
  cursor: pointer;
}
ul {
  list-style: none;
  position: absolute;
  top: 100px;
  left: 160px;
}
li {
  display: inline-block;
  color: #55556d;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 0.2px solid #55556d;
  cursor: pointer;
}
li:last-child {
  border-right: none;
}
li:hover {
  color: #6556bf;
}
p {
  color: #55556d;
  font-size: medium;
  position: absolute;
  left: 160px;
  top: 80px;
}
.compile {
  position: absolute;
  right: 30px;
  top: 35%;
  font-size: large;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #55556d;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}
.compile:hover {
  background-color: #2ecc71;
}
</style>